(今天切換故事主線了喔，別再吐倒了哦)

相信很多在前端打滾、需要用到 CSS 的人，一定或多或少都看過 Amos 的金魚也能懂系列鐵人賽文章吧？ 還記得有一個主題特別的讓我印象深刻，特別到我都忘記他其它年到底都寫過些什麼了， 那個主題主要就是：

「連續三十天實作不同方式的垂直置中」

當下看到真的是嘆為觀止，因為方式好多樣化！
(而且這個主題還是剛好他唯一一篇不是金魚系列的文章)

所以為了致敬一下，
我們今天就來玩玩 「金魚模仿遊戲吧！」
(註1)
 

備料

• 金魚 兩條
• 魚缸 一個
• 清水 一盆

這邊我已經幫各位先準備好一個魚缸和兩條可愛的小金魚 ，準備開始煮水囉：

<div id="魚缸" class="w-96 h-64 flex">
  <div id="金魚"></div>
  <div id="金魚"></div>
</div>

就放在這間水族館，快過去看看吧！

但是，聽說老闆賣的這兩條金魚生病了，雖然沒什麼力氣移動，
不過我們可以用 Tailwind 來幫助牠們！
 

內容對齊 (justify-content)

藉由 justify-{準軸點} 這個功能，我們可以設定 / 改變 flex 顯示模式下子元素在主準軸上對齊的方式，例如 justify-end 功能是將子元素在主準軸上置底。

以下是預設可以使用的內容對齊功能：

• justify-start
• justify-end
• justify-center
• justify-between
• justify-around
• justify-evenly

這邊可能會覺得前面的敘述有點難懂，所謂的主準軸就是看 flex 的方向而定。flex 預設為橫向排列，那麼這時 justify 就是在橫軸上移動，比如 justify-end 會讓東西都置右； 但如果今天 flex 排列方向用 flex-col 調整為直向，那麼 justify-end 功能就會是置底。 這邊有簡單圖解。

我們這邊，來試著讓金魚們水平均分所有空間，
那就要用到 justify-evenly：

<div id="魚缸" class="w-96 h-64 flex justify-evenly">
  <div id="金魚"></div>
  <div id="金魚"></div>
</div>

太好了～ 就是像這樣別讓牠們擠在一起，
就算沒病也悶出病來了。

不過牠們是不是身體有一半都沒泡到水呀？
我們快來幫助牠潛下去！
 

項目對準 (align-items)

藉由 items-{準軸點} 這個功能，我們可以設定 / 改變 flex 或 grid 顯示模式下子元素在副準軸上對齊、延展的方式，例如 items-end 功能是將子元素在副準軸上置底。

以下是預設可以使用的項目對準功能：

• items-start
• items-end
• items-center
• items-baseline
• items-stretch

這邊一樣，可能覺得前面的敘述還是有點難懂，就再解釋一次。所謂的副準軸就是看 flex 的方向而定 (此功能也可用在 grid)。

flex 預設為橫向排列，那麼這時 items 就是在縱軸上移動，比如 items-end 會讓東西都置底； 但如果今天 flex 排列方向用 flex-col 調整為直向，那麼 items-end 功能就會是置右。 一樣上個簡單圖解。

我們這邊用 items-center 讓魚兒們可以在水深的最中心。：

<div id="魚缸" class="w-96 h-64 flex justify-evenly items-center">
  <div id="金魚"></div>
  <div id="金魚"></div>
</div>

這樣，金魚們就可以順利的換位置了耶！
這麼一來，牠們空間變舒適了，病應該也好得更快哦～
 

justify 補充說明

雖然已經搞懂了複雜的主軸和副軸，但是實際使用一次就會發現在內容對齊 (justify-content) 內有三個屬性的效果很類似，不同於另外三個，分別是 justify-between、justify-around、justify-evenly。

between

justify-between 的功能是第一個元素置頂和最後一個元素置底，剩下的空間水平均分。

around

justify-around 的功能是所有元素保持與外界相同距離，斜線區塊就是各元素所保持的空間。

evenly

justify-evenly 的功能是將子元素完全水平均分在空間之中，每個元素與邊界及彼此的距離都相同。

今天內容比較少，因為內容也比較複雜一些。
希望上面的東西對你們有幫助！

下個篇章開始就更好玩囉～
因為我們要來幫助被慣老闆欺負的員工！
 

給你們的回家作業：

• 作業實施要點：
  • 試著改變魚缸，讓魚缸水更深。
  • 讓兩條小金魚一條在水面，另一條在水底。
  • 試著增加更多條金魚，且改用 grid 完成，而不是 flex
• 快不行的小金魚：快去拯救！
• 拯救完的小金魚：點我探望
   

[註1] 會以模仿遊戲做為本篇的命名是因為要致敬一位超級重要的學者，艾倫圖靈。
模仿遊戲是一部闡述二戰時期破譯敵軍加密機過程的歷史劇情電影，同時也是被稱為計算機之父、人工智慧之父 - 圖靈人生的一段故事。

關於兔兔們：

• Tailwind CSS 臺灣官網
• Tailwind CSS 臺灣 (臉書粉絲專頁)
• 兔兔教 × Tailwind CSS Taiwan (臉書社群)
• 兔兔教大本營

( # 兔兔小聲說 )

身為兔子，聽力都特別靈敏，因為我們有長長的大耳朵。
有一次比賽自己聽到了什麼，
朋友們表示牠們聽到了一兩公里外的風吹草動，
而我聽見下雨的聲音。